<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        $(function () {
            // 表格数据编辑回显
            huixiantable()
        })
        /*编辑回显*/
        function huixiantable() {
            // let tableData = $("#tableData").val();
            // console.log(tableData)
            let tableData = '[["姓名","年龄"],["张三","4"],["李四","15"]]'
            if (tableData && tableData!=''){
                let tableDataList = JSON.parse(tableData);
                var trHtml_1 = '<tr><td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" class="common_class" id="check_all_column" onclick="checkAllColumn(this)"></td>';
                var trHtml_2 = '<tr><td bgcolor="#eff3f8" align="center" width="4%"><input type="checkbox" class="common_class" id="check_all_row" onclick="checkAllRow(this)"></td>';
                var trHtml_3 = '';
                for (let i = 0; i < tableDataList.length; i++) {
                    if (i == 0){
                        for (let j = 0; j < tableDataList[i].length; j++) {
                            trHtml_1 += '<td bgcolor="#eeeeee" align="center"><input type="checkbox" class="check_column common_class" onclick="checkColumn(this)"/></td>'
                            trHtml_2 += '<td bgcolor="#eff3f8"><div class="table_header" contenteditable="true">'+tableDataList[i][j]+'</div></td>'
                        }
                    } else {
                        var trHtml_4 = '<tr><td align="center"><input type="checkbox" class="check_row common_class" onclick="checkRow(this)"></td>';
                        for (let j = 0; j < tableDataList[i].length; j++) {
                            trHtml_4 += '<td align="center"><div contenteditable>'+tableDataList[i][j]+'</div></td>'
                        }
                        trHtml_4+='</tr>';
                        trHtml_3+=trHtml_4;
                    }
                }
                trHtml_1+='</tr>';
                trHtml_2+='</tr>';

                var table_dataTable = document.getElementById("table_data");

                $(table_dataTable).children('thead').children().remove()
                $(table_dataTable).children('thead').append(trHtml_1+trHtml_2)

                $(table_dataTable).children('tbody').children().remove()
                $(table_dataTable).children('tbody').append(trHtml_3)

                $('.del_row').show()
                $('.add_column').show()
                $('.del_column').show()
                $('.tishi').show()
                $('#tableFieldset').show()

                resetTableWidth(document.getElementById("table_data"))
            } else {
                resetTable()
            }

            let linkData = $("#linkData").val();
            var link_dataTable = document.getElementById("link_data");
            if (linkData && linkData!=''){
                let linkDataList = JSON.parse(linkData);
                $(link_dataTable).children('thead').children().remove()
                resetLinkTable()
                var trHtml_3 = '';
                for (let i = 0; i < linkDataList.length; i++) {
                    trHtml_3 += '<tr>'
                        +'<td align="center"><input type="checkbox" class="check_row common_class" onclick="checkLinkTableRow(this)"></td>'
                        +'<td align="center" width="24%"><div contenteditable style="word-wrap:break-word;width:270px;">'+linkDataList[i].link_name+'</div></td>'
                        +'<td align="center" width="24%"><div contenteditable style="word-wrap:break-word;width:270px;">'+linkDataList[i].link_url+'</div></td>'
                        +'<td align="center" width="24%"><div contenteditable style="word-wrap:break-word;width:270px;">'+linkDataList[i].link_source+'</div></td>'
                        +'<td align="center" width="24%"><div contenteditable style="word-wrap:break-word;width:270px;">'+linkDataList[i].remark+'</div></td>'
                        +'</tr>';
                }
                $(link_dataTable).children('tbody').children().remove()
                $(link_dataTable).children('tbody').append(trHtml_3)

                $('.del_link_row').show()
                $('#linkFieldset').show()
            } else {
                resetLinkTable()
            }

            let filePaths = $("#file_").val();
            if (filePaths && filePaths!=''){
                let filePathsList = JSON.parse(filePaths);
                var file_pathsTable = document.getElementById("file_paths");
                $(file_pathsTable).children('thead').children().remove()
                resetFileTable()
                var trHtml_3 = '';
                for (let i = 0; i < filePathsList.length; i++) {
                    trHtml_3 += '<tr data-file-id="'+filePathsList[i].id+'">'
                        +'<td align="center"><input type="checkbox" class="check_row common_class" onclick="checkFileTableRow(this)"></td>'
                        +'<td align="center"><div style="text-align: left;">'+filePathsList[i].file_name+'</div></td>'
                        +'<td align="center"><div>'+filePathsList[i].source+'</div></td>'
                        +'<td align="center"><div>'+filePathsList[i].file_suffix+'</div></td>'
                        +'<td align="center"><div>'+filePathsList[i].capacity+'</div></td>'
                        +'<td align="center"><div>'+filePathsList[i].update_time+'</div></td>'
                        +'</tr>';
                }
                $(file_pathsTable).children('tbody').children().remove()
                $(file_pathsTable).children('tbody').append(trHtml_3)

                $('.del_file_row').show()
                $('#fileFieldset').show()
            } else {
                resetFileTable()
            }
        }
        /*全选行*/
        function checkAllRow(event){
            let checkedStatus = event.checked
            let checkBoxInput = $(event).parents("thead").next("tbody").children('tr').children('td').children("input[type='checkbox']")
            checkBoxInput.each(function () {
                $(this).prop('checked', checkedStatus)
            })
        }
        /*单选行*/
        function checkRow(event){
            let checkedStatus = event.checked
            if (checkedStatus == false){
                $('#check_all_row').prop('checked', false)
            } else {
                let checkBoxInput = $(event).parents("tbody").children('tr').children('td').children("input[type='checkbox']")
                let checkStatus = true
                checkBoxInput.each(function () {
                    let cruuCheckStatus = $(this)[0].checked
                    if (!cruuCheckStatus){
                        checkStatus = cruuCheckStatus
                    }
                })
                if (checkStatus){
                    $('#check_all_row').prop('checked', true)
                } else {
                    $('#check_all_row').prop('checked', false)
                }
            }
        }
        /*全选列表*/
        function checkAllColumn(event){
            let checkedStatus = event.checked
            let checkBoxInput = $(event).parents('tr').children('td').children(".check_column")
            checkBoxInput.each(function () {
                $(this).prop('checked', checkedStatus)
            })
        }
        /*单选列*/
        function checkColumn(event){
            let checkedStatus = event.checked
            if (checkedStatus == false){
                $('#check_all_column').prop('checked', false)
            } else {
                let checkBoxInput = $(event).parents('tr').children('td').children(".check_column")
                let checkStatus = true
                checkBoxInput.each(function () {
                    let cruuCheckStatus = $(this)[0].checked
                    if (!cruuCheckStatus){
                        checkStatus = cruuCheckStatus
                    }
                })
                if (checkStatus){
                    $('#check_all_column').prop('checked', true)
                } else {
                    $('#check_all_column').prop('checked', false)
                }
            }
        }
        /*添加 表格模块 行*/
        function addTableRow(){
            $('.del_row').show()
            $('.add_column').show()
            $('.del_column').show()
            $('.tishi').show()
            $('#tableFieldset').show()
            var table_data = document.getElementById("table_data");
            var tBodies = table_data.tBodies;
            var tbody = tBodies[0];
            let rows = tbody.rows.length
            var tr = tbody.insertRow(rows);
            var tds = table_data.rows[0].cells;//如果不是空表，首先获得表格有多少列，先获取再插入新行
            for (var i = 0; i < tds.length; i++) {//依次向新行插入表格列数的单元格
                var td = tr.insertCell(i);
                td.align='center'
                if (i == 0){
                    td.innerHTML = '<input type="checkbox" class="check_row common_class" onclick="checkRow(this)"/>';
                } else {
                    td.innerHTML = "<div contenteditable></div>";
                }
            }
            $('#check_all_row').prop('checked', false)

            resetTableWidth(table_data)
        }
        /*删除 表格模块 行*/
        function removeTableRow() {
            let checkStatus = false
            var table = document.getElementById("table_data");
            for (var i = table.rows.length - 1; i > 0; i--) {
                if (i == 0 || i == 1){
                    continue;
                }
                var chkOrder = table.rows[i].cells[0].firstChild;
                if (chkOrder && chkOrder.checked) {
                    checkStatus = true
                    //执行删除
                    table.deleteRow(i);
                    var tableDataRowLength = table.tBodies[0].rows.length;
                    if (tableDataRowLength == 0) {
                        $('.del_row').hide()
                        $('.add_column').hide()
                        $('.del_column').hide()
                        $('.tishi').hide()
                        $('#tableFieldset').hide()
                        $(table).children('tbody').children().remove()
                        $(table).children('thead').children().remove()
                        resetTable()
                    }
                }
            }
            if (!checkStatus) {
                $.modal.msgWarning("至少选择一条数据")
                return
            }
        }
        /*添加 表格模块 列*/
        function addTableColumn() {
            var table_data = document.getElementById('table_data');//获取表格信息
            var len = table_data.rows.length;//获得行数
            var tds = table_data.rows[0].cells;
            var len2 = tds.length;//获得列数
            /*if (len2 >= 16){
                $.modal.msgWarning("最多支持添加15列")
                return
            }*/
            for (var i = 0; i < len; i++) {
                var tr = table_data.rows[i].insertCell(len2);//依次向每一行的末尾插入一个新列
                tr.align='center'
                if (i == 0) {
                    tr.bgColor='#eeeeee'
                    tr.innerHTML = '<input type="checkbox" class="check_column" onclick="checkColumn(this)"/>'
                } else if (i == 1) {
                    tr.bgColor='#eff3f8'
                    // tr.width=baifenbi
                    tr.innerHTML = '<div class="table_header" contenteditable="true">标题</div>'
                } else {
                    // tr.width=baifenbi
                    tr.innerHTML = '<div contenteditable></div>';
                }
            }
            $('#check_all_column').prop('checked', false)
            resetTableWidth(table_data)
        }
        // 重置表格列宽度
        function resetTableWidth(tds) {
            let len = tds.rows[0].cells.length
            // 重置表格列的宽度
            var baifenbi = (parseFloat(96)/parseFloat(len)).toFixed(2)
            let addAfterTds = tds.rows[0].cells;
            for (let i = 0; i < addAfterTds.length; i++) {
                if (i != 0){
                    addAfterTds[i].width=baifenbi+'%'
                }
            }
        }
        /*删除 表格模块 列*/
        function removeTableColumn() {
            var table_data = document.getElementById('table_data');//获取表格信息
            var rowsLen = table_data.rows.length;//获取表格的行数

            let cloumnList = $(table_data).children('thead').children('tr').first().children('td');
            let checkStatus = false
            for (let i = cloumnList.length-1; i > 0; i--) {
                if (i == 0){
                    continue;
                }
                let column = $(cloumnList[i]).children('input[type="checkbox"]')
                if (column && column[0].checked) {
                    checkStatus = true
                    for (var j = 0; j < rowsLen; j++) {
                        //执行删除
                        table_data.rows[j].deleteCell(i);//删除每一行末尾的单元格
                    }
                    var len2 = table_data.rows[0].cells.length;
                    if (len2 <= 1 ) {
                        $('.del_row').hide()
                        $('.add_column').hide()
                        $('.del_column').hide()
                        $('.tishi').hide()
                        $('#tableFieldset').hide()
                        $(table_data).children('tbody').children().remove()
                        $(table_data).children('thead').children().remove()
                        resetTable()
                    }
                }
            }
            if (!checkStatus) {
                $.modal.msgWarning("至少选择一列数据")
                return
            }
        }
        /*重置 表格*/
        function resetTable(){
            var title =
                '<tr>'
                +'	<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" class="common_class" id="check_all_column" onclick="checkAllColumn(this)"/></td>'
                +'	<td bgcolor="#eeeeee" align="center"><input type="checkbox" class="check_column common_class" onclick="checkColumn(this)"/></td>'
                +'	<td bgcolor="#eeeeee" align="center"><input type="checkbox" class="check_column common_class" onclick="checkColumn(this)"/></td>'
                +'	<td bgcolor="#eeeeee" align="center"><input type="checkbox" class="check_column common_class" onclick="checkColumn(this)"/></td>'
                +'	<td bgcolor="#eeeeee" align="center"><input type="checkbox" class="check_column common_class" onclick="checkColumn(this)"/></td>'
                +'</tr>'
                +'<tr>'
                +'	<td bgcolor="#eff3f8" align="center" width="4%"><input type="checkbox" class="common_class" id="check_all_row" onclick="checkAllRow(this)"/></td>'
                +'	<td bgcolor="#eff3f8"><div class="table_header" contenteditable="true">标题</div></td>'
                +'	<td bgcolor="#eff3f8"><div class="table_header" contenteditable="true">标题</div></td>'
                +'	<td bgcolor="#eff3f8"><div class="table_header" contenteditable="true">标题</div></td>'
                +'	<td bgcolor="#eff3f8"><div class="table_header" contenteditable="true">标题</div></td>'
                +'</tr>'
            $('#table_data').children('thead').append(title)
        }
    </script>
</head>

<body>
<div class="row">
    <div class="col-sm-12 custem_table" >
        <input id="tableData" name="table_data" type="hidden" value="[['姓名','年龄'],['张三','4'],['李四','15']]"/>
        <button type="button" class="btn btn-white btn-sm add_row" onclick="addTableRow()"><i class="fa fa-plus"> 增加行</i></button>
        <button type="button" class="btn btn-white btn-sm del_row" onclick="removeTableRow(this)"><i class="fa fa-minus"> 删除行</i></button>
        <button type="button" class="btn btn-white btn-sm add_column" onclick="addTableColumn()"><i class="fa fa-plus"> 增加列</i></button>
        <button type="button" class="btn btn-white btn-sm del_column" onclick="removeTableColumn()"><i class="fa fa-minus"> 删除列</i></button>
        <fieldset class="fieldset" id="tableFieldset">
            <table class="table_data" id="table_data" bordercolor="#e5e6e7" border="1" cellpadding="2" width="100%">
                <thead></thead>
                <tbody></tbody>
            </table>
        </fieldset>
    </div>
</div>


</body>
</html>